<template>
    <div class="activeIndex">
        <div class="bgImg1">
            <div class="timeBar">
                <div class="times">
                    <div :class="{img1:isStart==0,img2:isStart==1}">
                    </div>
                </div>
                <ul class="nowTime">
                    <li>{{this.hours}}</li>
                    <li>{{this.minutes}}</li>
                    <li>{{this.seconds}}</li>
                </ul>
            </div>
            <div class="imgSign" @click='toSign()'></div>
        </div>
        <div class="bgImg2">
            <div class="skillBg">
                <div class="title">
                    <div class="leftTitle">
                        <div class="img">
                        </div>
                    </div>
                    <div class="rightTime" v-show='skillNextTime!=-1'>下一轮秒杀 {{skillNextTime}}</div>
                </div>
                <div class="goods">
                  <ul v-if="indexSkillGoods.length!=0">
                    <li v-for='(v,i) in indexSkillGoods' :key='i' @click='toSkill()'>
                        <div class="img">
                          <img :src="v.picture" alt="">
                        </div>
                        <p class="name">{{v.name}}</p>
                        <div class="price">
                            <p class="leftPrice">￥{{v.price}}</p>
                            <p class="rightPrice">
                                <del>￥{{v.originalPrice}}</del>
                            </p>
                        </div>
                    </li>
                  </ul>
                  <div class="noimg" v-if="indexSkillGoods.length==0" @click='noSkill()'>
                    <img src="https://image.hezongyy.com/pcimage/119h5/app_skillbg.jpg" alt="">
                  </div>
                </div>
                <p class="money" v-if="indexSkillGoods.length!=0">本轮秒杀可为您节约{{indexRemark}}元</p>
            </div>
        </div>
        <div class="bgImg3">
            <div class="postList">
                <ul>
                    <li @click='toActive(1)'>
                        <img src="https://image.hezongyy.com/pcimage/119h5/index_tj.png" alt="">
                    </li>
                    <li @click='toActive(2)'>
                        <img src="https://image.hezongyy.com/pcimage/119h5/index_zk.png" alt="">
                    </li>
                    <li @click='toActive(3)'>
                        <img src="https://image.hezongyy.com/pcimage/119h5/index_jt.png" alt="">
                    </li>
                    <li @click='toActive(4)'>
                        <img src="https://image.hezongyy.com/pcimage/119h5/index_zy.png" alt="">
                    </li>
                    <li @click='toActive(5)'>
                        <img src="https://image.hezongyy.com/pcimage/119h5/index_hg.png" alt="">
                    </li>
                    <li @click='toActive(6)'>
                        <img src="https://image.hezongyy.com/pcimage/119h5/index_bjp.png" alt="">
                    </li>
                    <li @click='toActive(7)'>
                        <img src="https://image.hezongyy.com/pcimage/119h5/indexpost1.png" alt="">
                    </li>
                    <li @click='toActive(8)'>
                        <img src="https://image.hezongyy.com/pcimage/119h5/indexpost2.png" alt="">
                    </li>
                </ul>
            </div>
        </div>
        <div class="bottomBar">
            <div class="left" @click='toBottom(1)'>
                <img src="https://image.hezongyy.com/pcimage/119h5/bottomright.png" alt="">
            </div>
            <div class="right" @click='toBottom(2)'>
                <img src="https://image.hezongyy.com/pcimage/119h5/bottomleft.png" alt="">
            </div>
        </div>
        <div class="leftFix" @click='toLive()'>
        </div>
    </div>
</template>

<script>
import url from "../../axios/apiUrl";
import { postRequest } from "../../api/index";
import { getRequest } from "../../api/indexGet";
export default {
  data() {
    return {
      nowTime: "", //当前服务器时间
      startTime: "", //开始时间
      endTime: "", //结束时间
      isStart: 0, //是否开始 0未开始，1进行中
      hours: 0,
      minutes: 0,
      seconds: 0,
      indexSkillGoods: [], //秒杀数据
      skillThisTime: 0, //当前秒杀时间
      skillNextTime: -1, //下一场秒杀时间
      post1: {},
      post2: {},
      url1Api: "",
      url2Api: "",
      num1: 0,
      num2: 0,
      typeUser: -1 ,//用户类型
      curLiveGoods:null,
      indexRemark:0,
      hours:'00',
      minutes:'00',
      seconds:'00',
    };
  },
  created() {
    // 获取时间
    getRequest(url.time119).then(res => {
      if (res.data.code == "000000") {
        this.nowTime = res.data.content.now;
        this.getNowTime();
        this.startTime = res.data.content.start;
        this.endTime = res.data.content.end;
        this.countDownInit();
      }
    });
    // 获取首页广告
    getRequest(url.adPost + "/0/index").then(res => {
      this.indexData = res.data.content;
      this.IndexFlashSale = this.indexData.IndexFlashSale;
      if (this.IndexFlashSale.flashItems.length != 0) {
        this.indexSkillGoods = this.indexData.IndexFlashSale.flashItems[0].goodsList;
        this.indexRemark = this.indexData.IndexFlashSale.flashItems[0].remark;
        this.countDownInit();
      }
      // this.skillTime(); //调用处理秒杀时间函数
    });
    // 获取用户信息
    getRequest(url.getUserInfo).then(res => {
      if (res.data.code == "000000") {
        this.typeUser = res.data.content.type;
      }
    });
    getRequest(url.adPost + "/1/activityMain").then(res => {
      // 拼接参数
      this.post1 = res.data.content.activityMainLeft;
      this.post2 = res.data.content.activityMainRight;
      if (this.post2.items.length != 0) {
        let url2 = JSON.parse(this.post2.items[0].url);
        for (var key in url2) {
          this.num1++;
          this.url2Api =
            "title='修正斯达舒'&customizedLabel=38";
        }
        let index2 = this.url2Api.lastIndexOf("&");
        this.url2Api = this.url2Api.substring(0, index2);
      }
      if (this.post1.items.length != 0) {
        let url1 = JSON.parse(this.post1.items[0].url);
        for (var key in url1) {
          this.num1++;
          this.url1Api =
            "title='滇虹药业'&customizedLabel=37";
        }
        // let index1 = this.url1Api.lastIndexOf("&");
        // this.url1Api = this.url1Api.substring(0, index1);
      }
      // 获取直播
      let activityLiveFlash =res.data.content.activityMainAPPLiveFlashSale.items;
      if(res.data.content.activityMainAPPLiveFlashSale.items.length!=0){
        this.curLiveGoods = activityLiveFlash[0];
      }
    });
    // 获取首页秒杀
    getRequest(url.flashIndex).then(res=>{
      if(res.data.code=='000000'){
        this.flashSale=res.data.content
        if(res.data.content.length!=0){
          let index=this.flashSale[0].startTime.lastIndexOf(" ");
          this.skillNextTime=this.flashSale[0].startTime.substring(index+1,this.flashSale[0].startTime.length);
        }else{
          this.skillNextTime=-1
        }
      }
    })
  },
  methods: {
    getNowTime() {
      setInterval(() => {
        this.nowTime = this.nowTime + 1000;
      }, 1000);
    },
    // 计算当前时间
    countDownInit() {
      var curTime = setInterval(() => {
        // this.nowTime = this.nowTime + 1000;
        if (this.nowTime < this.startTime) {
          this.isStart = 0;
          this.hours = Math.floor(
            ((this.startTime - this.nowTime) / 1000 / 60 / 60) % 24
          );
          // 判断小时是否大于24小时
          if (this.startTime - this.nowTime > 86400000) {
            let num = parseInt((this.startTime - this.nowTime) / 86400000);
            this.hours = num * 24 + this.hours;
          }
          this.minutes = Math.floor(
            ((this.startTime - this.nowTime) / 1000 / 60) % 60
          );
          this.seconds = Math.floor(
            ((this.startTime - this.nowTime) / 1000) % 60
          );
        } else {
          if(this.endTime - this.nowTime>=0){
            this.isStart = 1;
            this.hours = Math.floor(
              ((this.endTime - this.nowTime) / 1000 / 60 / 60) % 24
            );
            this.minutes = Math.floor(
              ((this.endTime - this.nowTime) / 1000 / 60) % 60
            );
            this.seconds = Math.floor(
              ((this.endTime - this.nowTime) / 1000) % 60
            );
            if (this.hours < 10) {
              this.hours = "0" + this.hours;
            }
            if (this.minutes < 10) {
              this.minutes = "0" + this.minutes;
            }
            if (this.seconds < 10) {
              this.seconds = "0" + this.seconds;
            }
          }else{
            this.hours='00'
            this.minutes='00'
            this.seconds='00'
          }
        }
      }, 1000);
    },
    skillTime1() {
      if (this.IndexFlashSale.flashItems.length >= 1) {
        // 获取当前场的整点时间
        this.skillThisTime = this.IndexFlashSale.flashItems[0].startTimeDisplay;
        // 获取下一场的开始时间
        if (this.IndexFlashSale.flashItems.length >= 2) {
          // 获取当前场的整点时间
          this.skillNextTime = this.IndexFlashSale.flashItems[1].startTimeDisplay;
          let nextTime = new Date(
            this.IndexFlashSale.flashItems[1].startTime
          ).getTime();
          if (this.nowTime >= nextTime) {
            this.skillThisTime = this.IndexFlashSale.flashItems[1].startTimeDisplay;
            this.skillNextTime = -1;
          }
        } else {
          this.skillNextTime = -1;
        }
      }
    },
    toActive(i) {
      if (this.typeUser == 1 || this.typeUser == 2) {
        if (i == 1) {
          window.location.href =this.pathURL +"nativeApp/discountArea";
        } else if (i == 2) {
          window.location.href =this.pathURL +"nativeApp/promotionArea";
        } else if (i == 3) {
          window.location.href =this.pathURL +"nativeApp/ladderArea";
        } else if (i == 4) {
          // window.location.href='http://192.168.0.99:10001/119h5/#/puyaoList'
          window.location.href='https://www.hezongyy.com/119mainapp/#/puyaoList'
        } else if (i == 5) {
          window.location.href =this.pathURL+"nativeApp/promotionPage";
        } else if (i == 6) {
          window.location.href='https://www.hezongyy.com/119mainapp/#/healthList'
          // window.location.href='http://192.168.0.99:10001/119h5/#/healthList'
        } else if (i == 7) {
          window.location.href =this.pathURL+"nativeApp/goodsList?title=滇虹药业&customizedLabel=37";
        } else if (i == 8) {
          window.location.href =this.pathURL+"nativeApp/goodsList?title=修正斯达舒&customizedLabel=38";
        }
      } else {
        this.$toast("该活动仅限于终端用户");
      }
    },
    toBottom(i) {
      if (this.typeUser == 1 || this.typeUser == 2) {
        if (i == 1) {
          window.location.href = "https://jfmallplus.hezongyy.com/#/toLotter";
        } else if (i == 2) {
          window.location.href = "https://jfmallplus.hezongyy.com/#/getCoupons";
        }
      } else {
        this.$toast("该活动仅限于终端用户");
      }
    },
    toSkill() {
      if (this.typeUser == 1 || this.typeUser == 2) {
        window.location.href =this.pathURL+"nativeApp/skillArea";
      } else {
        this.$toast("该活动仅限于终端用户");
      }
    },
    // 去直播间
    toLive() {
      if(this.curLiveGoods){
        if(this.typeUser==1||this.typeUser==2){
          if (this.curLiveGoods.url) {
            window.location.href=this.curLiveGoods.url
          } else {
            this.$toast(this.curLiveGoods.desc)
          }
        }else{
          this.$toast("该活动仅限于终端用户")
        }
      } else {
        this.$toast("亲！您来早了，别着急，老板还在跟厂家勾兑，争取价格再低点！");
      }
    },
    toSign(){
      // 119签到
      // window.location.href='https://www.hezongyy.com/119app/#/mySing'
      // 普通签到
      window.location.href = "https://jfmallplus.hezongyy.com/#/mySign";
    },
    noSkill(){
      this.$toast("秒杀活动暂未开始，请耐心等待~");
    },
  }
};
</script>

<style lang="less" scoped>
.activeIndex {
  width: 100%;
  background: #b41a1d;
  padding-bottom: 50px;
  .bgImg1 {
    width: 100%;
    // min-height: 435px;
    min-height: 331px;
    // background: url("https://image.hezongyy.com/pcimage/119h5/indexapp2_01.jpg")
    //   no-repeat center;
    background: url("https://image.hezongyy.com/pcimage/119h5/indexapp3_01.jpg")
    no-repeat center;
    background-size: 100% 100%;
    position: relative;
    padding-top: 894px;
    .timeBar {
      position: absolute;
      display: flex;
      height: 180px;
      align-items: center;
      .times {
        width: 246px;
        height: 96px;
        margin-left: 35px;
        margin-top: -70px;
        .img1 {
          width: 243px;
          height: 96px;
          background: url("https://image.hezongyy.com/pcimage/119h5/indexstart.png")
            no-repeat center;
          background-size: 100% 100%;
        }
        .img2 {
          width: 243px;
          height: 96px;
          background: url("https://image.hezongyy.com/pcimage/119h5/indexend.png")
            no-repeat center;
          background-size: 100% 100%;
        }
      }
      .nowTime {
        display: flex;
        li:first-child {
          margin-left: 31px;
        }
        li:nth-child(2) {
          margin-left: 84px;
          margin-right: 70px;
        }
        li {
          font-size: 35px;
          font-weight: bold;
          color: #ffffff;
          width: 62px;
          height: 62px;
          line-height: 62px;
          text-align: center;
        }
      }
    }
    .imgSign{
      width: 134px;
      height: 86px;
      background:url("https://image.hezongyy.com/pcimage/119h5/tosign_index.png")
      no-repeat center;
      background-size: 100% 100%;
      position: fixed;
      right: 0px;
      top: 266px;
      z-index: 1000;
    }
  }
  .bgImg2 {
    width: 100%;
    background: url("https://image.hezongyy.com/pcimage/119h5/indexapp3_02.jpg")
      no-repeat center;
    background-size: 100% 100%;
    min-height: 803px;
    .skillBg {
      margin-top: -180px;
      position: relative;
      z-index: 10;
      width: 100%;
      height: 484px;
      background: url("https://image.hezongyy.com/pcimage/119h5/skillbj.png")
        no-repeat center;
      background-size: 100% 100%;
      .title {
        width: 80%;
        margin: 0 auto;
        height: 80px;
        display: flex;
        justify-content: space-between;
        padding-top: 30px;
        align-items: center;
        .leftTitle {
          .img {
            width: 207px;
            height: 43px;
            background: url("https://image.hezongyy.com/pcimage/119h5/mstitle.png")
              no-repeat center;
            background-size: 100% 100%;
          }
        }
        .rightTime {
          font-size: 24px;
          color: #ffffff;
        }
      }
      .goods {
        margin: 0 10%;
        min-width: 100%;
        ul {
          margin-right: 150px;
          display: flex;
          overflow-x: scroll;
          overflow-y: hidden;
          height: 300px;
          -webkit-overflow-scrolling: touch;
          li {
            width: 200px;
            height: 300px;
            background: #c32022;
            margin-right: 14px;
            .img {
              width: 200px;
              height: 200px;
              background-color: #fff;
              img {
                width: 200px;
                height: 200px;
              }
            }
            .name {
              margin: 9px 0 12px;
              font-size: 22px;
              color: #ffffff;
              line-height: 26px;
              height: 52px;
            }
            .price {
              display: flex;
              align-items: center;
              .leftPrice {
                font-size: 26px;
                color: #ffffff;
                margin-right: 15px;
              }
              .rightPrice {
                font-size: 20px;
                color: #e47f80;
              }
            }
          }
        }
        ul::-webkit-scrollbar {
          width: 0;
          height: 0;
          display: none;
        }
        .noimg{
          margin-left: -45px;
          img{
            width: 690px;
            height: 329px;
          }
        }
      }
      .money {
        font-size: 20px;
        color: #f8ff34;
        margin-left: 10%;
        margin-top: 15px;
      }
    }
  }
  .bgImg3 {
    width: 100%;
    background: url("https://image.hezongyy.com/pcimage/119h5/indexapp3_03.jpg")
      no-repeat center;
    background-size: 100% 100%;
    min-height: 986px;
    .postList {
      margin-top: -300px;
      ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        li {
          img {
            width: 372px;
            height: 238px;
          }
        }
      }
    }
  }
  .bottomBar {
    width: 745px;
    height: 238px;
    background: url("https://image.hezongyy.com/pcimage/119h5/bottombar.png")
      no-repeat center;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-around;
    .left {
      width: 350px;
      img {
        margin-left: 10px;
        width: 305px;
        height: 264px;
      }
    }
    .right {
      width: 372px;
      margin-top: 20px;
      img {
        width: 378px;
        height: 179px;
      }
    }
  }
  .leftFix {
    position: fixed;
    bottom: 20%;
    z-index: 11;
    right: 10px;
    width: 180px;
    height: 180px;
    background: url("https://image.hezongyy.com/pcimage/119h5/liveDialog2.png")
      no-repeat center;
    background-size: 100% 100%;
  }
}
</style>